<template>
  <div class='news-detail'>
    <public-head>
      <span>小区活动详情</span>
    </public-head>
    <div class="content">
      <div class="head">
        <h2 class="title">{{ news_detail.name }}</h2>
        <p class="time">{{ news_detail.datePub }}</p>
      </div>
      <div class="container" v-html="news_detail.value">

      </div>
    </div>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    data() {
      return {
        news_detail: {} //
      }
    },
    created() {
      // fetch news detail
      this.isLoading(true)
      this.axios.post(root + '/api/wx/ad/get', { settingId: this.$route.query.settingId}).then((res) => {
        this.isLoading(false)
        this.news_detail = res.data.data
      })
    },
    methods: {
      ...mapActions(['isLoading'])
    },
    computed: {
      ...mapState(['is_loading'])
    }
  }
</script>>

<style lang="less">
  @import '../../../common/style/mixin.less';
  .news-detail {
    height: 100%;
    background: #fff;
    .content {
      padding: .35rem .3rem;
      .bor1pxTop;
      .head {
        padding-bottom: 0.35rem;
        .title {
          .ft(.28rem);
          color: #222;
          font-weight: 700;
        }
        .time {
          color: #999;
          .ft(.2rem);
          margin-top: .21rem;
        }
      }
      .container {
        .bor1pxTop;
        padding-top: .15rem;
        p {
          .ft(.26rem);
          line-height: .44rem;
          color: #404040; //text-indent: 2em;
        }
        img {
          display: block;
          margin: .2rem auto;
          max-width: 100%;
        }
      }
    }
  }
</style>
